<script setup lang="ts">
import CurrencyList from '~/components/currency/CurrencyList.vue';
</script>

<template>
  <div class="mb-2 items-start gap-3 rounded-xl bg-white/7 p-4">
    <h4 class="mb-4 mt-0">
      CurrencyIcon 组件使用例子
    </h4>
    <div class="flex flex-col gap-2 text-gray">
      <div><TCurrencyIcon symbol="TRX" />：使用 CDN</div>
      <div><TCurrencyIcon symbol="USDT" />：使用 CDN</div>
      <div><TCurrencyIcon symbol="BTC" />：使用 CDN，但 CDN 上没有这个图标，导致加载失败，最终使用占位图标</div>
      <div><TCurrencyIcon symbol="BTC" :useCdn="false" />：不使用 CDN，使用本地预设图标</div>
      <div>&nbsp;<TCurrencyIcon class="text-white" symbol="$" :useCdn="false" />&nbsp;：文本图标</div>
      <div>&nbsp;<TCurrencyIcon class="text-white" symbol="¥" :useCdn="false" />&nbsp;：文本图标</div>
    </div>

    <CurrencyList class="w-60" />
  </div>
</template>

<style lang="scss">
:root {
  background-color: #1d1e24;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
}
</style>
